<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{dataForm.attrId?'编辑属性库':'新增属性库'}}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="attrType" label="属性类型">
            <el-select v-model="dataForm.attrType" placeholder="请选择属性类型" clearable :disabled="$route.query.attrType?true:false">
              <el-option
                v-for="item in attrTypeList"
                :value="item.id"
                :label="item.name"
                :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="attrName" label="属性名称">
            <el-input type="text" v-model="dataForm.attrName"></el-input>
          </el-form-item>

          <el-form-item prop="fieldName" label="字段名称" >
            <el-input type="text" v-model="dataForm.fieldName" clearable></el-input>
          </el-form-item>

          <el-form-item prop="fieldType" label="字段类型">
            <el-select v-model="dataForm.fieldType" placeholder="请选择字段类型" clearable>
              <el-option
                v-for="item in $Options.fieldTypeList"
                :value="item.value"
                :label="item.label"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="fieldOptions" label="字段选项" v-if="dataForm.fieldType == 2 || dataForm.fieldType == 6">
            <el-input type="textarea" v-model="dataForm.fieldOptions"></el-input>
          </el-form-item>

          <el-form-item prop="dockData" label="对接标识">
            <el-input v-model="dataForm.dockData"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="dockFieldName" label="对接字段名">
            <el-input v-model="dataForm.dockFieldName"></el-input>
          </el-form-item> -->
          <el-form-item prop="businessId" label="商户" v-show="dataForm.attrType==3">
            <el-select v-model="dataForm.businessId" clearable filterable>
              <el-option v-for="item in businessList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="requiredFlag" label="是否必填">
            <el-switch v-model="dataForm.requiredFlag"  active-text="必填" inactive-text="非必填">
            </el-switch>
          </el-form-item>
          <el-form-item prop="multiFlag" label="是否多选" v-if="dataForm.fieldType == 2 || dataForm.fieldType == 3">
            <el-switch v-model="dataForm.multiFlag"  active-text="多选" inactive-text="单选">
            </el-switch>
          </el-form-item>
          <!-- <el-form-item prop="frontFlag" label="是否前置">
            <el-switch v-model="dataForm.frontFlag"  active-text="是" inactive-text="否">
            </el-switch>
          </el-form-item> -->
          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>

        <!-- <div class="tit">
          <h2>关联信息</h2>
        </div>
        <el-row>
          <el-form-item prop="ruleIds" label="产品分类" v-if="dataForm.attrType == 1">
            <el-select v-model="dataForm.classifyIds" multiple filterable
                       placeholder="请选择产品分类" clearable>
              <el-option
                v-for="item in classifyList"
                :value="item.id"
                :label="item.name"
                :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="goodsCodes" label="产品编号（多个以逗号隔开）" v-if="dataForm.attrType == 1">
            <el-input type="textarea" v-model="dataForm.goodsCodes"></el-input>
          </el-form-item>

          <el-form-item prop="ruleIds" label="平台规则" v-if="dataForm.attrType == 2">
            <el-select v-model="dataForm.ruleIds" multiple filterable
                       placeholder="请选择平台规则" clearable>
              <el-option
                v-for="item in ruleList"
                :value="item.id"
                :label="item.name"
                :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row> -->
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import AttrApi from '@/api/goods/attr';
  import RuleApi from '@/api/system/rule';
  import BusinessApi from "@/api/business/business"
  // import ServerClassifyApi from "@/api/server/serverClassify"

  export default {
    data() {
      return {
        dataForm: {
          attrId: "",
          attrName: "",
          attrType: "",
          requiredFlag: false,
          multiFlag: false,
          fieldName: "",
          fieldType: "",
          fieldOptions: "",
          dockData:"",
          businessId:"",
          // dockFieldName:"",
          // goodsCodes: "",
          // classifyIds: "",
          // ruleIds: [],
          // frontFlag:false,
          remark: "",
        },
        classifyList:[],
        businessList:[],
        ruleList:[],
        attrTypeList: [
          {id: 1, name: "分类"},
          {id: 2, name: "平台规则"},
          {id: 3, name: "产品"},
        ],
        roleRules: {
          attrName: [
            {required: true, message: "请输入属性名字", trigger: "focus"}
          ],
          attrType: [
            {required: true, message: "请选择属性类型", trigger: "change"}
          ],
          fieldName:[
            {required:true,message:"请输入字段名称",trigger:"change"}
          ],
          fieldType: [
            {required: true, message: "请选择字段类型", trigger: "change"}
          ]
        }
      }
    },
    components: {
    },
    computed:{
      getMultiFlagLable(){
        switch(this.dataForm.multiFlag){
          case 2:
            return "是否多选"
          case 3:
            return "是否有结束时间"

        }
      },
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const {id,attrType} = this.$route.query
        if (id) {
          this.dataForm.attrId = id
          this.getData()
        }else if(attrType){
          this.dataForm.attrType = Number(attrType)
        }

        this.getBusinessList()
        this.getRuleList()
        // this.getClassifyList()
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      getData() {
        AttrApi.getAttrInfo({
          id: this.dataForm.attrId
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
          this.dataForm.requiredFlag = res.data.requiredFlag
          this.dataForm.multiFlag = res.data.multiFlag
          // this.dataForm.frontFlag = res.data.frontFlag
          // if (res.data.goodsList){
          //   this.dataForm.goodsCodes = res.data.goodsList.map(item=>item.goodsCode).join(",")
          // }
          // if (res.data.classifyList){
          //   this.dataForm.classifyIds = res.data.classifyList.map(item=>item.serverClassifyId)
          // }
          // if (res.data.ruleList){
          //   this.dataForm.ruleIds = res.data.ruleList.map(item=>item.ruleId)
          // }
        })
      },

      getRuleList() {
        let param = {outType:1}
        RuleApi.listIdName(param).then(res => {
          this.ruleList = res.data
        })
      },
      async getBusinessList(){
        const {data} = await BusinessApi.listIdNameVo()
        this.businessList = data||[]
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                let fieldOptions = this.dataForm.fieldOptions
                if (this.dataForm.fieldType == 2 || this.dataForm.fieldType == 6){
                  if (!fieldOptions){
                    this.$message.error("请输入字段选项")
                    return
                  }
                }else{
                  this.dataForm.fieldOptions = ""
                }

                if (this.dataForm.attrId) {
                  this.editData();
                } else {
                  this.addData();
                }
              });
          }
        })
      },
      addData() {
        let param = {
          attrName: this.dataForm.attrName,
          attrType: this.dataForm.attrType,
          requiredFlag: this.dataForm.requiredFlag,
          multiFlag: this.dataForm.multiFlag,
          businessId:this.dataForm.businessId,
          // frontFlag:this.dataForm.frontFlag,
          dockData:this.dataForm.dockData,
          // dockFieldName:this.dataForm.dockFieldName,
          fieldName:this.dataForm.fieldName,
          fieldType: this.dataForm.fieldType,
          fieldOptions: this.dataForm.fieldOptions,
          remark: this.dataForm.remark
        };

        AttrApi.addAttr(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData() {
        let param = {
          attrId: this.dataForm.attrId,
          attrName: this.dataForm.attrName,
          attrType: this.dataForm.attrType,
          businessId:this.dataForm.businessId,
          requiredFlag: this.dataForm.requiredFlag,
          multiFlag: this.dataForm.multiFlag,
          // frontFlag:this.dataForm.frontFlag,
          fieldName:this.dataForm.fieldName,
          fieldType: this.dataForm.fieldType,
          fieldOptions: this.dataForm.fieldOptions,
          dockData:this.dataForm.dockData,
          // dockFieldName:this.dataForm.dockFieldName,
          remark: this.dataForm.remark
        };
        AttrApi.editAttr(param)
          .then(data => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/goods/attrManagement'});
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
  .upload-img {
    &::v-deep .el-upload-dragger {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
</style>

